<script setup>
import {ref} from 'vue'
import bgImage from '@/assets/bg.svg'
import router from "@/router/index.js";
import {ElMessage} from "element-plus";
import {user_login} from "@/api/profile.js";
import {setToken} from "@/utils/auth.js";
import {useUserStore} from "@/stores/user.js";

const userStore = useUserStore()
const username = ref('')
const password = ref('')

const handleLogin = () => {
  if(username.value && password.value) {
    const login_data = {
      username: username.value,
      password: password.value
    }
    user_login(login_data).then(res => {
      if(res) {
        setToken(res.token)
        userStore.setUserInfo(res.user)
        console.log(res.token)
        ElMessage({
          message: '登录成功',
          type: 'success'
        })
        router.push('/')
      } else {
        ElMessage({
          message: res.message || '登录失败',
          type: 'error'
        })
      }
    }).catch(err => {
      ElMessage({
        message: err.message || '请求错误',
        type: 'error'
      })
    })
  } else {
    ElMessage({
      message: '请输入用户名和密码',
      type: 'warning'
    })
  }
}
</script>

<template>
  <div class="login-container">
    <div class="login-bg">
      <img :src="bgImage" alt="background" class="bg-image">
    </div>
    <div class="login-logo">
      <img src="@/assets/logo.svg" alt="logo" class="logo-image">
    </div>
    <div class="login-form-wrapper">
      <div class="login-form">
        <h1 class="title">教务管理平台</h1>
        <el-form @keyup.enter="handleLogin">
          <el-form-item>
            <el-input
              v-model="username"
              placeholder="用户名"
              prefix-icon="User"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="password"
              type="password"
              placeholder="密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>
          <el-button type="primary" class="login-btn" @click="handleLogin" >登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .login-bg {
    position: absolute;
    width: 75%;
    height: 100%;
    left: 0;

    .bg-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .login-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 120px;
    height: 40px;
    z-index: 10;

    .logo-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .login-form-wrapper {
    position: absolute;
    width: 25%;
    height: 100%;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-form {
      width: 400px;
      padding: 40px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .title {
        margin-bottom: 30px;
        text-align: center;
        color: #333;
      }

      .login-btn {
        width: 100%;
        margin-top: 20px;
      }
    }
  }
}
</style>
